{__NOLAYOUT__}
<layout name="no_nav" />

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back()">返回</a>
  <h3 class="row-item top-bar-name">提交订单</h3>
  <a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<form action="__CONTROLLER__/confirmOrderPost" method="post">

  <!-- 收货地址 -->
  <section class="pr-order-item pr-order-address">

    <a class="db" href="{:U('DisShopDeliverAddress/deliverAddressList','sid='.$sid)}?buyUrl={$buyUrl}">

      <empty name="order.address">
      <p>增加收货地址</p>
      <else />
      
      <p>{$order.address.provinceName}&nbsp;{$order.address.cityName}&nbsp;{$order.address.areaName}&nbsp;{$order.address.address}</p>
      <p>{$order.address.name}&nbsp;&nbsp;{$order.address.tel}</p>
      </empty>
      
    </a>

  </section>
  
  <!-- 商品清单 -->
  <section class="pr-order-item pr-good-list">

    <h5 class="pr-good-list-title">商品清单：共&nbsp;{:count($order['orderItems'])}&nbsp;件商品</h5>
    
    <section class="pr-good-list-container">
      <volist name="order.orderItems" id="vo">
      <volist name="vo.items" id="vo_attr">
      <div class="pr-good-item flex-row">
        <a class="pr-good-pic row-item row-item-3" href="javascript:;">
          <img src="{$vo_attr.pic}">
        </a>
        <div class="pr-good-info row-item row-item-7">
          <p>{$vo.name}</p>
          <notempty name="vo_attr['attrs']">
          <p>规格：<foreach name="vo_attr.attrs" item="vo1" key="k">{$k}:{$vo1}&nbsp;&nbsp;</foreach></p>
          </notempty>
          <p>
            <span data-subprice="{$vo_attr.productPrice}">单价：{$vo_attr.productPrice}元</span>
            <span>数量：{$vo_attr.quantity}</span>
          </p>
        </div>
      </div>
      </volist>
      </volist>
    </section>

  </section>
  
  <style type="text/css">
	body .list-title {
		margin: 0 0 5px;
		padding: 0 12px;
		line-height: 24px;
		font-size: 14px;
		font-weight: normal;
		color: #7c7b83;
		text-transform: uppercase;
		text-shadow: 0 1px rgba(255, 255, 255, 0.2);
	}
	body .modal-confirm {
		overflow-y: auto;
		background-color: #efeff4;
	}
	.btn {
		padding: 0.3em 1em;
	}
	.container-block {
		overflow: hidden;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		margin: 10px 0;
		background-color: #fff;
		display: block;
		position: relative;
	}
	.container-block .block-module {
		padding: 10px 0 10px 10px;
		background-color: #fff;
		font-size: 15px;
		line-height: 22px;
		min-height: 22px;
		border: 0px none;
		position: relative;
	}
	.coupon-ui .txt-coupon-code {
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 30px;
		vertical-align: middle;
		font-size: 12px;
		padding: 4px 6px;
		line-height: 18px;
		border: 1px solid #ccc;
		border-radius: 4px;
		letter-spacing: 2px;
		width: 70%;
		-webkit-appearance: none;
		-moz-appearance: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.label-check {
		cursor: pointer;
		display: block;
		position: relative;
		padding-left: 30px;
	}
	.label-check .label-check-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-image: url("__STYLE__/DisShop/images/trade2x-1416817757559.png");
		background-size: 20px auto;
	}
	.label-check.checked .label-check-img{
		background-position: 0 -20px;
	}
	.order-coupon .radio, .order-coupon .coupon-info {
		vertical-align: top;
		line-height: 22px;
	}
	.order-coupon .coupon-info {
		display: block;
		padding-right: 10px;
		margin-top: 0;
	}
	.order-coupon .coupon-info span {
		display: inline-block;
		width: 150px;
	}
	.pr-order-item .pr-btn {
		margin-top: 0.6em;
	}
	.confirm-use-coupon {
		position: fixed;
		z-index: 10000;
		bottom: 0px;
		left: 0px;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		padding: 10px 15px;
		line-height: 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		zoom: 1;
	}
	.js-change-coupon {
		position:absolute;
		top: 0.4em;
		right:1.5em;
	}
	.lh-2e5 {
		line-height: 3em;
	}
	.pr12 {
		padding-right:12px;
	}
  </style>
  
  
  <div class="modal-confirm">
	<div class="js-scene-coupon-list scene pt15">
	        <div class="js-coupon-ui coupon-ui coupon-list">
	
	            <div class="container-block">
	                <div class="coupon-container">
	                    <div id="coupon--0" class="js-not-use block-module order-coupon order-coupon-item">
	                        <label class="label-check">
	                            <div class="label-check-img"></div>
	                            <div class="coupon-info">
	                                <span>不使用红包</span>
	                            </div>
	                        </label>
	                    </div>
	                </div>
	            </div>
	
	            <div class="js-code-container">
	                <h4 class="list-title">使用红包优惠码：</h4>
	                <div class="js-coupon-container coupon-container container-block">
	                    <div class="js-code-inputer block-module order-coupon order-coupon-item">
	                        <label class="label-check">
	                            <div class="label-check-img label-check-img-inputer" style="top:5px;"></div>
	                            <div class="coupon-inputer">
	                                <input class="js-code-txt txt txt-coupon-code" type="text" placeholder="请输入优惠码" autocapitalize="off" maxlength="12">
	                                <button class="js-valid-code btn btn-orange" type="button" disabled="">验证</button>
	                            </div>
	                            <div class="js-coupon-info coupon-info"></div>
	                        </label>
	                    </div>
	                </div>
	            </div>
	
	            <div class="js-card-container" style="<if condition='count($redPacketsLists) elt 0'>display: none;</if>">
	                <h4 class="list-title">使用红包：</h4>
	                <div class="js-coupon-container coupon-container container-block">
						<div class="block-module order-coupon order-coupon-used">
							<h4 class="block-module-title">选择红包：</h4>
						    <div class="js-normal-coupon coupon-info">
						        <volist id="vo" name="redPacketsLists">
			                    <label class="label-check" data-code="{$vo.code}" data-value="{$vo.value}">
		                            <div class="label-check-img" style="top:0.9em;"></div>
		                            <div class="coupon-info">
		                               <em class="fl pr12 lh-2e5">￥-{$vo.value}</em><p class="lh-2e5">满{$vo.fulfil}立减{$vo.value}</p>
		                               <a href="javascript:;" class="js-change-coupon btn">使用</a>
		                            </div>
			                    </label>
			                    </volist>
						    </div>
						</div>
					</div>
	            </div>
	            
	        </div>
	  </div>
	  <div class="js-confirm-use-coupon confirm-use-coupon" style="/* display:none; */">
		    <span class="js-total-privilege">总优惠：￥0.00</span>
		    <button type="button" class="js-confirm-coupon btn btn-small btn-blue font-size-14 fr">确定</button>
	  </div>
  </div>
  <script type="text/javascript">
  		var sid = "{$sid}";
  		var redRes = {
  			'redPacketCode' : '{$order.redPacketCode}',
  			'redPacketOffset' : {$order['redPacketOffset']?$order['redPacketOffset']:0}, 
  		};
  		
  		var packetsConfirm = {
  			'init' : function() {
  	  	  		$(".label-check").click(function() {
  	  	  			if ( !$(this).parent().hasClass('js-code-inputer') ) {
  	  	  	  			$(".label-check").removeClass("checked");
 	  	  	  	  		$(this).addClass("checked");
  	  	  				if ( $(this).attr("data-code") ) {
  	  	  					redRes['redPacketCode'] = $(this).attr("data-code");
  	  	  					redRes['redPacketOffset'] = $(this).attr("data-value");
  	  	  				} else {
  	  	  					redRes['redPacketCode'] = null;
	  	  					redRes['redPacketOffset'] = 0;
  	  	  				}
 	  	  	  	  		$(".js-total-privilege").text("总优惠：￥"+$(this).attr("data-value")*1);
  	  	  			}
  	  	  		});
  	  	  		$(".js-confirm-coupon").click(function() {
  	  	  			packetsConfirm.ok();
  	  	  		});
  	  	  		$(".js-code-txt").bind("keyup keydown blur", function() {
  	  	  			if ( $(this).val() != '' ) {
  	  	  				$(".js-valid-code").removeAttr("disabled");
  	  	  			} else {
  	  	  				$(".js-valid-code").attr("disabled", "disabled");
  	  	  			}
  	  	  		});
  	  	  		$(".js-valid-code").click(function() {
	  	  	  		if ( $('.js-code-txt').val() == '' ) {
	  	  	  			APP.alert('请输入优惠码');
	  	  	  		} else {
	  	  	  			
	  	  	  		}
  	  	  		});
  	  	  		if ( redRes['redPacketCode'] ) {
  	  	  			$("label[data-code='"+redRes['redPacketCode']+"']").addClass('checked');
  	  	  			$(".js-total-privilege").text("总优惠：￥"+redRes['redPacketOffset']);
  	  	  		} else {
  	  	  			$(".js-not-use .label-check").addClass("checked");
  	  	  		}
  	  	  		this.ready = 1;
  			},
  			'show' : function() {
  				$('.modal-confirm').addClass('active');
  			},
  			'ok' : function() {
  				$('.modal-confirm').removeClass('active');
  				if ( redRes['redPacketCode'] ) {
  					$(".pr-order-packets .info").text('已选择使用'+redRes['redPacketOffset']+'元红包');
  				} else {
  					$(".pr-order-packets .info").text('未使用红包');
  				}
  				var actaulFee = order['goodsTotalPrice'] + order['shippingTotalPrice'] - redRes['redPacketOffset'];
  				$("#total-price").text(actaulFee+'元');
  				$("input[name='packetCode']").val(redRes['redPacketCode']);
  			}
  		};
  		
	  	$(function() {
	  		packetsConfirm.init();
	  		
	  		$("#btnSelectPackets").click(function() {
	  			packetsConfirm.show();
	  		});
	  		
			if ( redRes['redPacketCode'] ) {
 				$(".pr-order-packets .info").text('已选择使用'+redRes['redPacketOffset']+'元红包');
 			} else {
 				$(".pr-order-packets .info").text('未使用红包');
 			}
	  	});
  </script>
  
  <section class="pr-order-item">
  
    <p class="pr-order-money">
      <span>商品总金额</span>
      <span class="fr">{$order.goodsTotalPrice}元</span>
    </p>
    <p class="pr-order-money">
      <span>运费</span>
      <span class="fr" id="freight">{$order['shippingTotalPrice']}元</span>
    </p>
    <p class="pr-order-money total">
      <span>订单总计</span>
      <span class="fr" id="total-price">{$order.totalPrice}元</span>
    </p>
    
	<if condition="$order['id'] eq '' || in_array('pay', $order['operates'])">
    <button type="submit" class="btn btn-orange w100 pr-btn">去结算</button>
    </if>
    
    <if condition="$order['coquetry_id']">
    <button id="view-pay-another-btn" type="button" class="btn btn-orange w100 pr-btn">查看代付信息</button>
    </if>
    
    <eq name="user['id']" value="29">
    <if condition="$order['id'] eq '' || in_array('startPayAnother', $order['operates'])">
    <button id="order-pay-another-btn" type="button" class="btn btn-white w100 pr-btn">找人代付</button>
    </if>
    </eq>
    
	<if condition="in_array('cancel', $order['operates'])">
	<button id="order-cancel-btn" type="button" class="btn btn-white w100 pr-btn" data-id="{$order.id}">取消订单</button>
	</if>
	
  </section>

  <input type="hidden" name="buyMethod" value="">
  <input type="hidden" name="orderId" value="{$order.id}">{/* 订单id（已保存待支付订单有此值） */}
  <input type="hidden" name="packetCode" value="{$order.redPacketCode}">
  <input type="hidden" name="addressId" value="{$order.address.id}">
  <input type="hidden" name="orderNo" value="{$order.orderNo}">
  <input type="hidden" name="sid" value="{$sid}">
  
</form>

<script src="__COMMON__/js/modal.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var order = {
	  'goodsTotalPrice' : {$order.goodsTotalPrice},
  	  'shippingTotalPrice' : {$order.shippingTotalPrice}
  };
  
  (function() {
	$("#order-pay-another-btn").click(function() {
		$("input[name='buyMethod']").val('2');
		$('form').submit();
	});
	  
	$("#order-cancel-btn").click(function() {
			$this = $(this);
			modal.confirm({
				'title': '取消订单提示',
				'text': '确定要取消此订单吗？',
				'callback': function() {
					$.ajax({
						type: "POST",
						url: "{:U('DisShopOrder/cancelOrder')}",
						async: true,
						data: {
							id: $this.attr("data-id"),
							sid: sid,
						},
						success: function(response) {
							APP.alert(response.msg);
							if (response.error == 0) {
								window.location.href="{:U('DisShopOrder/showOrder', 'id='.$order['id'].'&sid='.$sid)}";
							}
						},
						error: function() {
							APP.alert("网络错误，请重试！");
						}
					});
				}
			});
			return false;
		});
	
	$("#view-pay-another-btn").click(function() {
		location.href="{:U('DisShopCoquetryOrder/payAnotherInfo', 'id='.$order['id'].'&sid='.$sid)}";
	});
	
  })();
  
  $(function() {
	
	  $(".pr-good-list-title").on("tap", function() {
	    $(this).parent().toggleClass("open");
	  });
	  
	  var actaulFee = order['goodsTotalPrice'] + order['shippingTotalPrice'] - redRes['redPacketOffset'];
	  $("#total-price").text(actaulFee+'元');
	  
  });

</script>